<template>
  <div class="home-content">
       <!-- 导航栏 -->
        <van-nav-bar   class="nav-bar">
            <template #title>
                    <van-button icon="search" class="search-btn" to="/search">搜索</van-button>
            </template>
        </van-nav-bar>
        <!-- 文章频道列表 -->
        <van-tabs v-model="active" class="tabs">
            <van-tab v-for="item in channelsList" :key="item.id" :title="item.name" class="tabs-item">
                <article-list :channel="item"/>
            </van-tab>
            <div  slot="nav-right" 
                     @click="showPop=true"
                    class="wap-nav-wrap"
            >
                 <van-icon name="wap-nav" />
            </div>
        </van-tabs>

        <!-- 弹出层  编辑频道-->
        <van-popup
            v-model="showPop"
            closeable
            close-icon-position="top-left"
            get-container="body"
            position="bottom"
            class="pop"
          >
           <!-- 
               模板中的$event表示事件参数
            -->
             <channel-edit 
             :channel="channelsList" 
             @close="showPop=false"
            
             @updata-active="onUpDateActive"
             :activeChannel="active"
             ></channel-edit>
         </van-popup>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { getItem } from '@/utils/storage'
import { getUserChannels } from '@/api/user.js'
import ArticleList  from './components/article-list.vue'
import channelEdit from './components/channel-edit.vue'
export default {
  name: 'home',
  components: {
    ArticleList,
    channelEdit
  },
  computed:{
    ...mapState(['user'])
  },
  directives: {  },
  data(){
    return {
      active:0, //控制被激活的标签
      channelsList:[], //文章频道列表数据
      showPop:false//控制编辑频道的弹出层显示或隐藏
    }
  },
  created() {
    this.loadChannels()
  },
  methods: {
    async loadChannels(){
        // const { data }=await  getUserChannels()
        // this.channelsList=data.data.channels
        let userChannels=[]
        if(this.user){
            //登录了 请求获取线上的用户频道列表数据
             const { data }=await  getUserChannels()
             userChannels=data.data.channels
        }
        else{
            //没有登录，判断是否有本地存储的频道列表数据
            const localChanels=getItem('user-channel')
            //如果有本地存储的频道列表则使用
            if(localChanels){
              userChannels=localChanels
            }else{
              //如果没有登录，也没有进行本地存储，那就请求默认列表
               const { data }=await  getUserChannels()
               userChannels=data.data.channels
            }
        }
          //把处理好的数据 放到data中，以供模板使用       
          this.channelsList=userChannels
    },
    onUpDateActive(index){
      console.log(index)
      this.active=index
    }
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-nav-bar__title{
  max-width: unset;
}
.search-btn{
  width: 278px;
  height: 32px;
  border-radius: 20px;
  background: rgba(255,255,255,0.2);
  border:none;
  font-size: 14px;
  color: #ffffff;
   .van-icon{
     font-size: 16px;
   }
}
.tabs{
  padding-right:20px;
  /deep/ .van-tab{
    border-right: 1px solid #edeff3;
    border-bottom: 1px solid #edeff3;
  }
  /deep/ .van-tabs__line{
      width: 15px !important;
      height: 3px;
      background: #3296fa;
      bottom:20px;
  } 
}
.wap-nav-wrap{
   position: fixed;
   right:0;
   width:33px;
   height: 44px;
   display: flex;
   justify-content: center;
   align-items: center;
   background: rgba(255,255,255,0.9);
    border-bottom: 1px solid #edeff3;   
   .van-icon{
     font-size: 24px;
   }
}
.pop{
  height: 100%;
}
</style>